<template>
    <div class="queryLibrary">
        <el-row :gutter="20">
            <el-col :span="10">
                <div class="dracon">
                  <el-input
                      type="textarea"
                      placeholder="请输入内容"
                      v-model="queryLibraryValue"
                      resize="none"
                      maxlength="64"
                      show-word-limit
                      clearable
                  >
                  </el-input>
                  <div class="dracon_search">
                      <p>已输入{{queryLibraryValue.length}}个字，还能输入{{64-(queryLibraryValue.length)}}个字</p>
                      <el-button type="primary" round icon="el-icon-search">搜索</el-button>
                  </div>
                  <div class="content_search">
                      <h4>点击搜索</h4>
                      <el-tag
                      :key="tag"
                      v-for="tag in hotLabel"
                      :disable-transitions="false"
                      effect="dark">
                      {{tag}}
                      </el-tag>
                  </div>
                  <el-button size="mini" class="label_more">更多<i class="el-icon-caret-bottom"></i></el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="dracon">
                  <div class="detail">
                      <h3>
                        <i class="qlyl">{{detail.label}}</i> {{detail.title}}
                      </h3>
                      <div class="source">{{detail.source}} · {{detail.date}}</div>
                      <!-- <div class="detail_content">
                          {{detail.content}}
                      </div> -->
                      <div class="detail_ifrname">
                        <div class="con_ifrname">
                            <iframe src="https://baike.baidu.com/item/%E7%A8%8E%E6%94%B6%E6%B3%95%E5%BE%8B%E5%88%B6%E5%BA%A6/391406" name="iframe_a" frameborder="0" align="left"></iframe>
                          </div>
                      </div>
                  </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name:'QueryLibrary',
    data(){
        return{
            //查智库输入内容
            queryLibraryValue: "税收",
            //点击搜索标签
            hotLabel:['劳务纠纷','税务筹划','房地产开发','城市更新','一带一路','一带一路1','劳务派遣','劳务纠纷1',],
            //内容
            detail:{
              title:'我国现行税收法律体系有哪些？',
              label:'政策',
              source:'税务局',
              date:'2022-04-24',
              content:`
                2019年A股上市银行的年报出来了，36家银行的净利润近1.6万亿，占A股3800余家上市公司净利润的约40%。
                2019年，36家A股上市银行总共支出的员工薪酬达7604亿元，人均31.6万元。平安银行以60.02万元的傲视群雄。
                我马上联想到了华尔街那帮精致的利己主义者搞出次贷危机，却可以完全置身度外。可是我们的问题却远比它们复杂。
                这说明了什么？说明了食利者拿走了社会总新创价值的百分之四十以上。食利者的回报不仅跑赢了几乎所有实体企业中的佼佼者，上市公司，更是把占最大基数的广大中小微企业远远抛在后面，而平安银行平均年薪60万以上更是超越了至少百分之八十以上的中小微企业主。
                这个平均年薪60万一出台，平安银行的基层员工也纷纷称被平均，以及网上出现的关于马明哲超过6000多万的年薪的质疑。这说明财富不但在行业间分配不公，在银行业内部同样如此。
                我现在给大家讲两则实体企业的小故事。
                第一个发生在大约2009年。有一天我接到一个朋友的电话，说某台资企业老板问我有没有途径可以弄到民间贷款。我说没有类似这样的民间借贷渠道，他说见见面或许能帮到这家企业。
                我见到了一个面脸憔悴的女台商，虽然举止优雅，但疲惫的语气让我感受到了难以呼吸的压力。朋友告诉我，她丈夫在孩子很小的时候就过世了，一个人拉着两个女儿成人，现在两对女儿女婿都在东莞工厂帮忙。
                女台商说，因美国次贷危机，她的美国客户实施破产保护，导致她三十多万美元成了坏账。虽然这个金额占她销售额比例不高，但已经导致她的经济链条断裂。她的供应商为了自保，相当部分要求现金才可以拿货，有一家还把她的企业告上了法庭。如此长收短付，实在周转不过来。
                我见到了一个面脸憔悴的女台商，虽然举止优雅，但疲惫的语气让我感受到了难以呼吸的压力。朋友告诉我，她丈夫在孩子很小的时候就过世了，一个人拉着两个女儿成人，现在两对女儿女婿都在东莞工厂帮忙。
                女台商说，因美国次贷危机，她的美国客户实施破产保护，导致她三十多万美元成了坏账。虽然这个金额占她销售额比例不高，但已经导致她的经济链条断裂。她的供应商为了自保，相当部分要求现金才可以拿货，有一家还把她的企业告上了法庭。如此长收短付，实在周转不过来。 
                我见到了一个面脸憔悴的女台商，虽然举止优雅，但疲惫的语气让我感受到了难以呼吸的压力。朋友告诉我，她丈夫在孩子很小的时候就过世了，一个人拉着两个女儿成人，现在两对女儿女婿都在东莞工厂帮忙。
                女台商说，因美国次贷危机，她的美国客户实施破产保护，导致她三十多万美元成了坏账。虽然这个金额占她销售额比例不高，但已经导致她的经济链条断裂。她的供应商为了自保，相当部分要求现金才可以拿货，有一家还把她的企业告上了法庭。如此长收短付，实在周转不过来。 
              `,
            },
        }
    },
    methods:{
        
    },
}
</script>

<style scoped>
/* 查智库 */
.queryLibrary,
.queryLibrary .el-row{
    height: 100%;
}
.queryLibrary .dracon .el-icon-document{
  margin-top: 0;
}
.queryLibrary .dracon >>> .el-textarea textarea {
  height: 56px;
  border-radius: 12px;
  font-family: Microsoft Yahei;
}
.dracon_search{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 16px;
}
.dracon_search .el-button{
  height: 36px;
  font-size: 14px;
  padding: 0 18px!important;
}
.content_search{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content_search>h4{
  width: 100%;
  font-size: 13px;
  color: #666;
}
.content_search .el-tag{
  width: 22%;
  text-align: center;
  height: 36px;
  line-height: 36px;
  margin-bottom: 16px;
  border-radius: 20px;
  font-size: 12px;
  border:0;
  background-color: #F4F5F8;
  color: #666;
  cursor: pointer;
}
.content_search .el-tag:hover{
  background-color: #eceef3;
}
.label_more{
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}

/* 详情内容页 */
.detail{
  height: 100%;
}
.detail h3{
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
}
.detail h3>i{
  display: inline-block;
  padding: 0 14px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #777;
  color: #fff;
  margin-right: 6px;
}
.detail .source{
  color: #999;
  font-size: 12px;
}
.detail .detail_content{
  height: 80%;
  overflow-y: auto;
  font-size: 16px;
  line-height: 26px;
  margin-top: 26px;
}
.detail .detail_ifrname{
  width: 100%;
  height: 80%;
  overflow: hidden;
}
.detail .detail_ifrname .con_ifrname{
  width: 100%;
  height: 140%;
  margin-top: -240px;
}
.detail .detail_ifrname iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>